<template>
	<div class="app-container">
		<div class="table">
			<div class="table-top">
				<p>
					<span>产品名称：</span>
					<el-input v-model="form.proName"></el-input>
				</p>
				<p>
					<span>净重：</span>
					<el-select v-model="form.region" placeholder="请选择净重">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</p>
			</div>
			<div class="table-center">
				<p>
					<span>执行标准：</span>
					<el-select v-model="form.region" placeholder="请选择执行标准">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</p>
				<p>
					<span>生产许可证编号：</span>
					<el-input v-model="form.proCode"></el-input>
				</p>
				<p>
					<span>生产日期：</span>
					<el-input v-model="form.proDay" disabled></el-input>
				</p>
				<p>
					<span>毛 重：</span>
					<el-select v-model="region" placeholder="请选择毛重">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</p>
				<p>
					<span>生产批号：</span>
					<el-input v-model="form.proNum" disabled></el-input>
				</p>
				<p>
					<span>含 量：</span>
					<el-input v-model="form.proContent"></el-input>
				</p>
			</div>
			<!-- tale底部 -->
			<div class="table-btm">
				<div>
					<p>
						<span>商品名：</span>
						<el-input v-model="form.shopName"></el-input>
					</p>
					<p>
						<span>类型：</span>
						<el-input v-model="form.shopClassify"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>成分表：</span>
						<el-input v-model="form.chengfen"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>保质期：</span>
						<el-input v-model="form.baozhi"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>使用量：</span>
						<el-select v-model="region" placeholder="请选择毛重">
							<el-option label="区域一" value="shanghai"></el-option>
							<el-option label="区域二" value="beijing"></el-option>
						</el-select>
					</p>
				</div>
				<div>
					<p>
						<span>使用方法：</span>
						<el-input v-model="form.shiyong"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>适用范围：</span>
						<el-input v-model="form.fanwei"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>贮藏方法：</span>
						<el-input type="textarea" v-model="form.zhucang"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>注意事项：</span>
						<el-input type="textarea" v-model="form.zhuyi"></el-input>
					</p>
				</div>
				<div>
					<p>
						<span>备注：</span>
						<el-input type="textarea" v-model="form.beizhu"></el-input>
					</p>
				</div>
				<h6>
					<svg width="200px" height="70px" version="1.1" xmlns="http://www.w3.org/2000/svg" style="margin: 0px;">
						<polygon points="50,31 120,59  190,31  120,1" style="fill:#FFFFFF;stroke:#000000;stroke-width:2;">
						</polygon>
						<text style="fill: black;font-size: 16px;" x="95" y="35">合&nbsp;&nbsp;&nbsp;&nbsp;格</text>
					</svg>
					<img src="@/assets/img/logo.jpg" alt="">
				</h6>
			</div>
			<div class="tips">
				<p>本企业通过 ISO9001、ISO14001、ISO45001、ISO22000 管理体系认证</p>
				<p><span>生产商：河南金丹乳酸科技股份有限公司</span><span>地址：河南省周口市郸城县金丹大道08号</span></p>
				<p><span>电话：0394-3195355 3195318</span><span>传真：0394-3195766</span><span>网址：http://www.hnjindan.com</span></p>
			</div>
			<div class="submit">提交</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				proName: '',
				region: '',
				proCode: '',
				proDay: '',
				proNum: '',
				proContent: '',
				shopName: '',
				shopClassify: '',
				chengfen: '',
				baozhi: '',
				shiyong: '',
				fanwei: '',
				zhucang: '',
				zhuyi: '',
				beizhu: ''
			}
		};
	}
};
</script>

<style lang="scss" scoped>
p {
	padding: 0;
	margin: 5px 0;
}
.app-container {
	background: #fff;
}
.table {
	width: 858px;
	&-top {
		border-top: 3px solid #000000;
		display: flex;
		align-items: center;
		> p {
			// font-family: '宋体';
			flex: 1;
			display: flex;
			font-size: 29px;
			align-items: center;
			/deep/.el-input {
				width: 200px;
				line-height: 32px;
			}
			/deep/.el-input--medium .el-input__icon{
				line-height: 32px;
			}
			/deep/.el-input--medium .el-input__inner {
				width: 200px !important;
				line-height: 32px;
			}
		}
	}
	&-center {
		border-top: 3px solid #000000;
		display: flex;
		flex-wrap: wrap;
		> p {
			font-family: '宋体';
			width: 50%;
			display: flex;
			font-size: 20px;
			align-items: center;
			/deep/.el-input {
				width: 200px;
				line-height: 32px;
			}
			/deep/.el-input--medium .el-input__icon{
				line-height: 32px;
			}
			/deep/.el-input--medium .el-input__inner {
				width: 200px !important;
				line-height: 32px;
			}
		}
	}
	&-btm {
		position: relative;
		border-top: 3px solid #000000;
		> div {
			display: flex;
			width: 100%;
			flex-wrap: wrap;
			> p {
				font-family: '宋体';
				width: 50%;
				display: flex;
				font-size: 20px;
				align-items: center;
				/deep/.el-input {
					width: 200px;
				}
				/deep/.el-input--medium .el-input__inner {
					width: 200px !important;
				}
				/deep/.el-input--medium .el-input__icon{
					line-height: 32px;
				}
				/deep/.el-textarea {
					width: 250px !important;
					line-height: 32px;
				}
				&:nth-child(2) {
					justify-content: flex-end;
				}
			}
		}
		> h6 {
			position: absolute;
			right: 0;
			top: 50px;
			display: flex;
			flex-direction: column;
			align-items: center;
			>img{
				width: 100px;
				height: 100px;
				margin: 20px 0 0 20px;
			}
		}
	}
}
.tips{
		width: 100%;
		>p{
			display: flex;
			justify-content: space-between;
			font-size: 20px;
			font-weight: 700;
			line-height: 30px;
		}
	}
	.submit{
		width: 100px;
		height: 40px;
		background: #18a05e;
		border-radius: 5px;
		text-align: center;
		line-height: 40px;
		color: #fff;
		font-size: 16px;
		cursor: pointer;
	}
</style>
